<title>百度地图</title>
<!--  
    官网地址：http://lbsyun.baidu.com/index.php?title=jspopular
    当前版本：v2.0  v3.0  lite(v1.0)
    作用概述：百度地图JavaScript API
    插件兼容：IE 6.0+、Firefox 3.6+、Opera 9.0+、Safari 3.0+、Chrome
    集成时间：2018年5月2日

使用步骤：
    1、（可选，但是推荐这么做）在config.js中加入以bMap为key的配置（只有ak为必须配置）：
        ,bMap:{
            ak:'这个是key'//必须参数，其余参数可不配置
            ,v:'3.0'//默认版本3.0（可选1.0  2.0   3.0  其中1.0为lite）。具体请查看官方api
            ,autolite:false//是否根据当前系统版本自动开启lite版本，默认false。若使用了lite中没有的功能，请将该参数设置为false
            ,https:false//是否开启https请求， 默认false
            ,timeout:10//等待bMap的加载时间。默认10s。若在10s内未能加载bMap则控制台会报错：bMap加载超时
        }
    2、还是config.js，在extend配置中加入bMap：
        ,'bMap'
    3、浏览器访问本页面即可看到样例。 例如：http://localhost/start/index.html#/test/bMap

注意：
    1、因为单页，所以只会在第一次初始化（若设置步骤1的config，则在layui.use之后就会自动初始化）的时候发起一次初始化加载js的请求。
    2、本插件只是实现了加载百度地图api的功能，剩余的代码都需要在bMap.render中自行编写。
    3、友情提示：百度地图商业用途是收费的。

-->
<div id="LAY_test_bMap_div1" style="width: 50%;height: 50%;"></div>
<div id="LAY_test_bMap_div2" style="width: 50%;height: 50%;"></div>
<script type="text/javascript">
    layui.use('bMap', function(){
        var bMap = layui.bMap;

        //建议这么用，简单明了
        bMap.render(function(){//这里直接写回调函数即可
            var map = new BMap.Map("LAY_test_bMap_div1"); //js严格区分大小写，因此BMap和bMap是两个不同变量。
            var point = new BMap.Point(116.404, 39.915);  // 创建点坐标  
            map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别  
        });

        //如果没有设置第一步骤，其实也可以使用下述的方法来加载百度地图
        //但是初始化请求只有一次、却在每次代码都单独配置就很多余了
        //下述例子只是展示内置功能，在实际使用中推荐使用第一个步骤那样配置：
        bMap.render({
            ak:'y8Iymom3AL4YavhYyKdXcWUX8MgFFMIs'//一旦设置了全局，此（发起请求的相关）参数就会失效。
            ,https:true
            ,done:function(){//这种方式回调函数叫做done
                var map = new BMap.Map("LAY_test_bMap_div2"); 
                var point = new BMap.Point(116.404, 39.915);  // 创建点坐标  
                map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别  
            }
        });

    });
</script>